<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>交易概况</span>
      </div>
      <el-row type="flex" justify="space-between" :gutter="20">
        <el-col :span="12"><TransactionOverview :data="data[0]" /> </el-col>
        <el-col :span="12"><TransactionOverview :data="data[1]" /></el-col>
      </el-row>
      <!-- <el-row type="flex" justify="space-between" :gutter="20">
        <el-col :span="12"><TrendComparison :data="trendData[0]"/> </el-col>
        <el-col :span="12"><TrendComparison :data="trendData[1]"/></el-col>
      </el-row> -->
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import TransactionOverview from "./compare/transactionOverview.vue";
import TrendComparison from "./compare/trendComparisons.vue";

@Component({
  components: {
    TransactionOverview,
    TrendComparison,
  },
})
export default class MyApplication extends Vue {
  @Prop()
  protected TradeData1!: any;
  @Prop()
  protected TradeData2!: any;

  protected data: any = [
    {
      name: "name1",
      type: 0,
      dataList: [
        { name: "订单数量（次）", con: "0", id: 0 },
        { name: "平均价格（元）", con: "0", id: 1 },
        { name: "交易数量（度）", con: "0", id: 2 },
        { name: "交易总额（元）", con: "0", id: 3 },
      ],
    },
    {
      name: "name2",
      type: 1,
      dataList: [
        { name: "订单数量（次）", con: "0", id: 0 },
        { name: "平均价格（元）", con: "0", id: 1 },
        { name: "交易数量（度）", con: "0", id: 2 },
        { name: "交易总额（元）", con: "0", id: 3 },
      ],
    },
  ];

  @Watch("TradeData1", { immediate: true, deep: true })
  protected getData1() {
    if (this.TradeData1) {
      this.$set(
        this.data[0].dataList[0],
        "con",
        this.TradeData1.trade_interval
      );
      this.$set(this.data[0].dataList[1], "con", this.TradeData1.avg_price);
      this.$set(this.data[0].dataList[2], "con", this.TradeData1.total_qty);
      this.$set(this.data[0].dataList[3], "con", this.TradeData1.total_amt);
    } else {
      this.$set(this.data[0].dataList[0], "con", 0);
      this.$set(this.data[0].dataList[1], "con", 0);
      this.$set(this.data[0].dataList[2], "con", 0);
      this.$set(this.data[0].dataList[3], "con", 0);
    }
  }
  @Watch("TradeData2", { immediate: true, deep: true })
  protected getData2() {
    if (this.TradeData2) {
      this.$set(
        this.data[1].dataList[0],
        "con",
        this.TradeData2.trade_interval
      );
      this.$set(this.data[1].dataList[1], "con", this.TradeData2.avg_price);
      this.$set(this.data[1].dataList[2], "con", this.TradeData2.total_qty);
      this.$set(this.data[1].dataList[3], "con", this.TradeData2.total_amt);
    } else {
      this.$set(this.data[1].dataList[0], "con", 0);
      this.$set(this.data[1].dataList[1], "con", 0);
      this.$set(this.data[1].dataList[2], "con", 0);
      this.$set(this.data[1].dataList[3], "con", 0);
    }
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
// .cardBox {
//   height: 55vh;
//   overflow: hidden;
// }
</style>


